<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>完善个人信息</span>
      </div>
    </template>
    <el-main>
      <el-row type="flex" justify="center" align="middle">
        <el-col :span="14">
          <el-descriptions class="margin-top" :column="1" border>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                用户名
              </template>
              {{ userInfoData.username }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                姓名
              </template>
              <el-input v-model="userInfoData.name" placeholder="请输入姓名"></el-input>
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                手机号
              </template>
              <el-input v-model="userInfoData.phone" placeholder="请输入手机号"></el-input>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-location-outline"></i>
                所属部门
              </template>
              <li v-for="(deptName,index) in deptNameList" :key="index">{{ deptName }}</li>

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                所在岗位
              </template>
              {{ postName ? postName : '空' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                座右铭
              </template>
              <el-input v-model="userInfoData.description" placeholder="请输入座右铭"></el-input>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>

      </el-row>
    </el-main>

    <el-footer>
      <el-row type="flex" justify="center" align="middle">
        <el-button type="info" icon="el-icon-refresh-right" @click="reset">重 置</el-button>
        <el-button type="success" icon="el-icon-check" @click="confirm">提 交</el-button>
      </el-row>

    </el-footer>

  </el-card>
</template>


<script>

import userApi from '@/api/user/user'
import postApi from '@/api/system/post'
import deptApi from '@/api/system/dept'

export default {
  data() {
    return {
      userInfoData: {
        username: '',
        name: '',
        phone: '',
        deptId: '',
        postId: '',
        description: ''
      },

      deptNameList: [],
      postName: '',
      parentId: ''
    }
  },

  mounted() {
    this.fetchData()
  },

  methods: {
    fetchData() {
      // 用户的基本信息
      userApi.details().then(response => {
        this.userInfoData = response.data

        // 赋值岗位名称
        postApi.getPostById(response.data.postId).then(response => {
          if (response.data === '空') {
            this.postName = '未分配岗位'
          } else {
            this.postName = response.data.name
          }
        })

        // 赋值部门名称
        deptApi.findNodesById(response.data.deptId).then(response => {
          if (response.data === '空') {
            this.deptNameList.push('未分配部门')
          } else {
            // 遍历部门集合对象
            response.data.forEach(item => {
              // 添加到集合中
              this.deptNameList.push(item.name)
            })
          }
        })
      })
    },

    // 重置
    reset() {
      userApi.details().then(response => {
        this.userInfoData = response.data
      })
    },

    // 提交
    confirm() {
      userApi.updateUser(this.userInfoData).then(response => {
        //提示信息
        this.$message({
          type: 'success',
          message: '个人信息完善成功'
        })
        // 重置
        this.reset()
      })
    }

  }
}
</script>

<style>
.page-container {

  margin: 50px;

}
</style>
